import { useEffect, useRef } from "react";
import { num } from "../utils/api";
import * as echarts from "echarts";
import { useRank } from "./use-rank";

// const students = ['曾茂鹏', '梁瑾锐', '何孟敏', '徐子盈']
// const legends = ['电动列车操作', '轨道交通自动运维', '车辆机械系统检修']
const bar = {
  type: 'bar',
  barWidth: 26,
  label: {
    show: true,
    position: 'inside'
  },
}

const n = () => {
  const res = num(10, 5)
  return res
}


function getOption(names: string[]) {
  if (names.length <= 5) return null
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // legend: {
    //   data: legends,
    //   left: '30%',
    //   top: 0,
    //   textStyle: { color: "#fff", fontSize: 9 },
    //   itemWidth: 15,
    //   itemHeight: 8,
    // },
    grid: {
      top: 20,
      bottom: 20,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        data: [names[4], names[5], names[6], names[7]]
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: names[0],
        data: [n(), n(), n(), n()],
        ...bar,
      },
      {
        name: names[1],
        data: [n(), n(), n(), n()],
        ...bar
      },
      {
        name: names[2],
        data: [n(), n(), n(), n()],
        ...bar
      }
    ]
  };
}

function useOption() {
  const students = useRank()
  const names = students.map(item => item.name)
  return getOption(names)
}

export function useTeamBar() {
  const chart = useRef<echarts.ECharts>()
  const dom = useRef<any>()
  const option = useOption()

  useEffect(() => {
    if (!option) return
    chart.current = echarts.init(dom.current)
    chart.current?.setOption(option)
  }, [option])

  return [dom]
}
